<template>
  <Modal :value="getLovelyPuppiesShowModal" title="小狗" width="970" height="580" @on-ok="onCancel" @on-cancel="onCancel">
    <div class="img_h_style">
      <div class="img_v_style">
        <img v-bind:src="img1" width="180" height="180"/>
        <img v-bind:src="img2" width="180" height="180"/>
        <img v-bind:src="img3" width="180" height="180"/>
        
      </div>
      <div class="img_v_style">
          <img v-bind:src="img4" width="180" height="180"/>
          <img v-bind:src="img5" width="180" height="180"/>
          <img v-bind:src="img6" width="180" height="180"/>
      </div>
      <div  class="img_v_style">
          <img v-bind:src="img7" width="180" height="180"/>
          <img v-bind:src="img8" width="180" height="180"/>
          <img v-bind:src="img9" width="180"  height="180"/>
      </div>
      <div  class="img_v_style">
          <img v-bind:src="img10" width="180" height="180"/>
          <img v-bind:src="img11" width="180" height="180"/>
          <img v-bind:src="img12" width="180" height="180"/>
      </div>
      <div class="img_v_style">
          <img v-bind:src="img13" width="180" height="180"/>
          <img v-bind:src="img14" width="180" height="180"/>
          <img v-bind:src="img15" width="180" height="180"/>
      </div>
    </div>
    <diV slot="footer">
      <Button type="primary" @click="lastPage()" v-bind:disabled="lastFlag">上一页</Button>
      <Button type="primary" @click="nextPage()" v-bind:disabled="nextFlag">下一页</Button>
    </diV>
  </Modal>
</template>

<script>
import img90011 from '@/assets/game/slot_lovelypuppies/img90011.png'
import img90021 from '@/assets/game/slot_lovelypuppies/img90021.png'
import img90031 from '@/assets/game/slot_lovelypuppies/img90031.png'
import img90041 from '@/assets/game/slot_lovelypuppies/img90041.png'
import img90051 from '@/assets/game/slot_lovelypuppies/img90051.png'
import img90061 from '@/assets/game/slot_lovelypuppies/img90061.png'
import img90071 from '@/assets/game/slot_lovelypuppies/img90071.png'
import img90081 from '@/assets/game/slot_lovelypuppies/img90081.png'
import img90091 from '@/assets/game/slot_lovelypuppies/img90091.png'
import img90101 from '@/assets/game/slot_lovelypuppies/img90101.png'
import img90111 from '@/assets/game/slot_lovelypuppies/img90111.png'
import img90121 from '@/assets/game/slot_lovelypuppies/img90121.png'
import img90131 from '@/assets/game/slot_lovelypuppies/img90131.png'
import img90141 from '@/assets/game/slot_lovelypuppies/img90141.png'
export default {
  props: ['recordData', 'showLPModal'],
  data () {
    return {
      curPage: 1,
      imgMap: {},
      curIndex: 0,
      lastFlag: false,
      nextFlag: false,
      img90011,
      img90021,
      img90031,
      img90041,
      img90051,
      img90061,
      img90071,
      img90081,
      img90091,
      img90101,
      img90111,
      img90121,
      img90131,
      img90141,
      img1: '',
      img2: '',
      img3: '',
      img4: '',
      img5: '',
      img6: '',
      img7: '',
      img8: '',
      img9: '',
      img10: '',
      img11: '',
      img12: '',
      img13: '',
      img14: '',
      img15: ''
    }
  },
  created () {
    this.imgMap['90011'] = img90011
    this.imgMap['90021'] = img90021
    this.imgMap['90031'] = img90031
    this.imgMap['90041'] = img90041
    this.imgMap['90051'] = img90051
    this.imgMap['90061'] = img90061
    this.imgMap['90071'] = img90071
    this.imgMap['90081'] = img90081
    this.imgMap['90091'] = img90091
    this.imgMap['90101'] = img90101
    this.imgMap['90111'] = img90111
    this.imgMap['90121'] = img90121
    this.imgMap['90131'] = img90131
    this.imgMap['90141'] = img90141
    console.log('this.imgMap:' + this.imgMap)
  },
  methods: {
    lastPage () {
      console.log('lastPage')
      if (this.curPage > 1) {
        this.curPage = this.curPage - 1
        this.onShowData(this.curPage)
      } else {
        this.$Message.info('已经是第一页!')
      }
    },
    nextPage (name) {
      console.log('nextPage')
      if (this.curPage < this.recordData.length - 1) {
        this.curPage = this.curPage + 1
        this.onShowData(this.curPage)
      } else {
        this.$Message.info('已经是最后一页!')
      }
    },
    onCancel () {
      this.curPage = 0
      console.log('onCancel')
      this.$emit('closeLovelyPuppiesModal')
    },
    onShowData (index) {
      if (index > this.recordData.length - 1) {
        this.$Message.error('超出数据范围!')
      }
      let _data = this.recordData[index].split(',')
      let _item = _data[0].split('-')
      let _key = '' + _item[0] + _item[1]
      console.log('_key:', _key)
      this.img1 = this.imgMap[_key]
      _item = _data[1].split('-')
      _key = '' + _item[0] + _item[1]
      this.img2 = this.imgMap[_key]
      _item = _data[2].split('-')
      _key = '' + _item[0] + _item[1]
      this.img3 = this.imgMap[_key]
      _item = _data[3].split('-')
      _key = '' + _item[0] + _item[1]
      this.img4 = this.imgMap[_key]
      _item = _data[4].split('-')
      _key = '' + _item[0] + _item[1]
      this.img5 = this.imgMap[_key]
      _item = _data[5].split('-')
      _key = '' + _item[0] + _item[1]
      this.img6 = this.imgMap[_key]
      _item = _data[6].split('-')
      _key = '' + _item[0] + _item[1]
      this.img7 = this.imgMap[_key]
      _item = _data[7].split('-')
      this.img8 = this.imgMap[_key]
      _item = _data[8].split('-')
      _key = '' + _item[0] + _item[1]
      this.img9 = this.imgMap[_key]
      _item = _data[9].split('-')
      _key = '' + _item[0] + _item[1]
      this.img10 = this.imgMap[_key]
      _item = _data[10].split('-')
      _key = '' + _item[0] + _item[1]
      this.img11 = this.imgMap[_key]
      _item = _data[11].split('-')
      _key = '' + _item[0] + _item[1]
      this.img12 = this.imgMap[_key]
      _item = _data[12].split('-')
      _key = '' + _item[0] + _item[1]
      this.img13 = this.imgMap[_key]
      _item = _data[13].split('-')
      _key = '' + _item[0] + _item[1]
      this.img14 = this.imgMap[_key]
      _item = _data[14].split('-')
      _key = '' + _item[0] + _item[1]
      this.img15 = this.imgMap[_key]
      this.curIndex = index
      console.log('this.curIndex:', this.curIndex, ' ,this.recordData.length:', this.recordData.length)
      if (this.curIndex === this.recordData.length - 1) {
        this.nextFlag = true
      } else {
        this.nextFlag = false
      }

      if (this.curIndex === 0) {
        this.lastFlag = true
      } else {
        this.lastFlag = false
      }
    }
  },
  computed: {
    getLovelyPuppiesShowModal () {
      console.log('getLovelyPuppiesShowModal')
      // let curData = this.recordData[0]
      if (this.recordData.length > 0) {
        console.log(this.recordData[0])
        this.onShowData(this.curIndex)
      }
      return this.showLPModal
    },
    setLovelyPuppiesShowModal () {
      console.log('setLovelyPuppiesShowModal')
    }
  }
}
</script>

<style>
.img_v_style {
  	/*flex布局（作用于容器）*/
  width:200px;
  height:580px;
	display:flex;
  flex-direction:column;
}
.img_h_style {
  	/*flex布局（作用于容器）*/
  width:950px;
  height:580px;
	display:flex;
  flex-direction:row;
}

</style>
